<template>
  <el-cascader clearable filterable :collapse-tags="collapseTags" :show-all-levels="false" :props="cascaderProps"
    :options="options" :placeholder="placeholder" v-model="list" @change="selectOption" style="width: 100%">
  </el-cascader>
</template>

<script>
import { queryUserMsg, permission } from "@/api/communityOperating/personalSop";
export default {
  name: "createdCascader",
  props: {
    placeholder: {
      type: String,
      default: "员工",
    },
    staff: {
      type: [Array, String],
      default: function () {
        return [];
      },
    },
    collapseTags: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    staff(newValue) {
      if (!newValue) {
        this.list = [];
      }
    },
  },
  data() {
    return {
      options: [],
      list: [],
      cascaderProps: {
        multiple: true,
      },
    };
  },
  mounted() {
    this.queryDeptMsg();
  },
  methods: {
    // 查询执行员工
    queryDeptMsg() {
      let obj = {
        name: "",
        deptId: null,
        authFlag: "Y",
      };
      permission(obj).then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.options.push({
              id: item.userId,
              value: item.userId,
              label: item.userName,
              // children: [],
            });
          });
        }
      });
    },
    // 懒加载 执行员工,创建人
    loadOptions(parentNode, resolve) {
      let nodes = [];
      queryUserMsg({ deptId: parentNode.value }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            res.data.forEach((item) => {
              nodes.push({
                value: item.userId,
                label: item.userName,
                children: null,
                leaf: 1,
              });
            });
          } else {
            nodes = [];
          }
          resolve(nodes);
        }
      });
    },
    selectOption(select) {
      this.$emit(
        "update:staff",
        select.map((item) => item[0])
      );
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
